import React from "react";

const Chart = (props) => {
    
    const handleClick = () => {
        // 调用API，往编辑器中插入一个数字
        props.editor.insertText(
            "```chart\n" + 
            "{\"type\": \"polarArea\",\"data\": {\"datasets\": [\n" + 
            "{\"data\": [11,16,7,3,14],\"backgroundColor\": [\"#FF6384\",\"#4BC0C0\",\"#FFCE56\",\"#E7E9ED\",\"#36A2EB\"],\"label\": \"我的数据\"}\n" + 
            "],\"labels\": [\"红\",\"绿\",\"黄\",\"灰\",\"兰\"]},\"options\": {}}\n" + 
            "```\n\n" + 
            "<p>请参考<a href=\"http://www.chartjs.org/docs/\" target=\"_blank\">ChartJS</a>。</p>"
        );
    }

    return (
        <span
        className="button button-type-counter"
        title="图表"
        onClick={handleClick}
        >
        <i className="fa fa-bar-chart" />
        </span>
    );
}

Chart.align = 'left';
Chart.pluginName = 'chart';

export default Chart;